<template>
	<view class="container">

		<view class="block" v-for="(bookinfo, index) in books" :key="index">
			<view @click="getBookDetail(bookinfo.bookId)">
				<!-- v-for="(item, index) in items" -->
				<view class="title">{{bookinfo.title}}</view>
				<!-- 遍历authors -->
				<view class="author">作者：{{bookinfo.authors|authorsFilter}}</view>
				<view class="content">
					{{bookinfo.content}}
				</view>
				<!-- 遍历labels -->
				<view class="meta">
					<view>标签：{{bookinfo.labels|labelsFilter}}</view>
					<img src="/static/bookIcon/like.png" alt="Icon" class="icon">
					<view>{{bookinfo.like}}</view>
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	import CryptoJS from "crypto-js";
	const key = CryptoJS.enc.Utf8.parse("19ad05341das5454");
	const iv = CryptoJS.enc.Utf8.parse("19xji53d41das546");
	export default {
		data() {
			return {
				// second: 3,
				keyword: '',
				canClick: true,
				books: [{
						"bookId": "21564545645645/454564564546545",
						"title": "这是标题",
						"authors": [{
								"name": "尽阳",
								"bio": "表面上是一个文字工作者",
								"avatar_url": "https://picx.zhimg.com/v2-fae2468e4de6ba4f64d3cc8980481b42.jpg?source=320ce2a5"
							},
							{
								"name": "好家伙",
								"bio": "表面上是一个文字工作者",
								"avatar_url": "https://picx.zhimg.com/v2-fae2468e4de6ba4f64d3cc8980481b42.jpg?source=320ce2a5"
							}
						],
						"content": "我暗恋竹马好多年，多年爱意埋藏在心中，却一句都不能说出口。因为他是恐同直男。我可以是他从小一起长大的竹马，无话不谈的好兄弟，却唯独不能是与他共度余生的爱人。",
						"labels": ["纯爱", "现实情感", "双男主", "追妻火葬场", "现代"],
						"like": "1000",
					},
					{
						"bookId": "21564545645645/454564564546545",
						"title": "这是标题",
						"authors": [{
								"name": "尽阳",
								"bio": "表面上是一个文字工作者",
								"avatar_url": "https://picx.zhimg.com/v2-fae2468e4de6ba4f64d3cc8980481b42.jpg?source=320ce2a5"
							},
							{
								"name": "好家伙",
								"bio": "表面上是一个文字工作者",
								"avatar_url": "https://picx.zhimg.com/v2-fae2468e4de6ba4f64d3cc8980481b42.jpg?source=320ce2a5"
							}
						],
						"content": "我暗恋竹马好多年，多年爱意埋藏在心中，却一句都不能说出口。因为他是恐同直男。我可以是他从小一起长大的竹马，无话不谈的好兄弟，却唯独不能是与他共度余生的爱人。",
						"labels": ["纯爱", "现实情感", "双男主", "追妻火葬场", "现代"],
						"like": "1000",
					}
				]
			};
		},
		onLoad(option) {
			//传递了keyword参数
			// this.keyword = option.keyword
			// uni.showLoading({
			// 	title: '搜索加载中'
			// });
			// var enc = this.myEncrypt(this.keyword)
			// // 请求服务器，获取搜索结果
			// uni.request({
			// 	url: 'http://106.53.193.224:8090/api/search/json?search=' + enc,
			// 	// 	    header: {
			// 	// 	        'custom-header': 'hello' //自定义请求头信息
			// 	// 	    },
			// 	success: (res) => {
			// 		uni.hideLoading()
			// 		if (res.data.code == 200) {
			// 			//请求成功
			// 			uni.showToast({
			// 				title: '请求成功',
			// 				duration: 500,
			// 			});
			// 			this.books = res.data.data
			// 		} else {
			// 			// 请求失败
			// 			// uni.$emit('search_error', {
			// 			// 	flag: true,
			// 			// 	message: res.data.message
			// 			// })
			// 			uni.showToast({
			// 				title: res.data.message + "2秒后自动跳转",
			// 				duration: 2000,
			// 				icon: 'error'
			// 			});

			// 			setTimeout(() => {
			// 				uni.navigateBack({
			// 					delta: 1
			// 				});
			// 			}, 2000);

			// 			// let that = this
			// 			// //执行倒计时
			// 			// var intervalId = setInterval(function() {
			// 			// 	console.log(that.second)
			// 			// 	that.time()
			// 			// 	if (that.second <= 0) {
			// 			// 		clearInterval(intervalId)
			// 			// 	}
			// 			// }, 1000);

			// 		}

			// 	}
			// });

		},
		methods: {

			getBookDetail(book_id) {
				if (this.canClick) {
					this.canClick = false;
					uni.navigateTo({
						url: '/pages/paidColumnDetail/paidColumnDetail?book_id=' + book_id
					});
					setTimeout(() => {
						this.canClick = true
					}, 3000);
				} else {
					uni.showToast({
						title: '请等待3秒后再尝试点击',
						icon: 'none'
					});
				}
			},
			myEncrypt(word) {
				const srcs = CryptoJS.enc.Utf8.parse(word);
				const encrypted = CryptoJS.AES.encrypt(srcs, key, {
					iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
			},

			myDecrypt(word) {
				const encryptedHexStr = CryptoJS.enc.Base64.parse(word);
				const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
				const decrypt = CryptoJS.AES.decrypt(srcs, key, {
					iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
				return decryptedStr.toString();
			},
		},
		filters: {
			authorsFilter(value) {
				let authorsStr = ""
				// 遍历数组
				for (let i = 0; i < value.length; i++) {
					// 取出名字
					authorsStr = authorsStr + value[i]['name']
					if (i != value.length - 1) {
						// 不是最后一个则拼接、
						authorsStr = authorsStr + "、"
					}
				}
				return authorsStr;
			},
			labelsFilter(value) {
				let labelStr = ""
				for (let i = 0; i < value.length; i++) {
					// 取出名字
					labelStr = labelStr + value[i]
					if (i != value.length - 1) {
						// 不是最后一个则拼接、
						labelStr = labelStr + "-"
					}
				}
				return labelStr;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;
		background-color: #f0f0f0;
		font-family: Arial, sans-serif;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
	}

	.block {
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin: 10px 0;
		padding: 15px;
		width: 100%;
		max-width: 500px;
		box-sizing: border-box;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.author {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
	}

	.content {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.meta {
		font-size: 12px;
		color: #999;
		display: flex;

	}


	.meta img {
		margin-left: 60%;
		margin-right: 2px;
	}

	.icon {
		width: 16px;
		height: 16px;
	}

	@media (max-width: 768px) {
		.block {

			margin: 10px;
		}
	}
</style>